<template>
  <div class="login-index">
    <div class="login-index-content">
      <div class="header">
        <img
          class="logo"
          src="@/assets/logo.jpeg"
          alt="房资深"
        >
      </div>
      <div class="account-form">
        <h2>登录</h2>
      </div>
      <div class="account-form">
        <input type="text" v-model="account" placeholder="请输入账号">
      </div>
      <div class="account-form" v-show="status === 'password'">
        <input type="password" v-model="password" placeholder="请输入密码">
      </div>
      <div class="account-form validation" v-show="status === 'captcha'">
        <input
          type="text"
          v-model="captcha"
          placeholder="请输入验证码"
        >
        <span @click="getCaptcha">{{loading?time:tips}}</span>
      </div>
      <div class="account-form">
        <button @click="login">登录</button>
        <div class="bottomLink">
          <p v-if="status === 'password'" @click="byCaptcha">免密登录</p>
          <p v-else @click="byPassword">帐号密码登录</p>
          <p @click="register">注册新帐号</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      account: '',
      password: '',
      captcha: "",
      loading: false,
      tips: '获取验证码',
      time: 60,
      status: 'password'
    }
  },
  methods: {
    async login() {
      const loginForm = {
        username: this.account,
        password: this.password
      }
      await this.$store.dispatch('user/login', loginForm)
      this.$router.push('/home')
    },
    register() {
      this.$router.push('/register')
    },
    byCaptcha() {
      this.status = 'captcha'
      this.password = ''
    },
    getCaptcha() {

    },
    byPassword() {
      this.status = 'password'
      this.captcha = ''
    }
  }
}
</script>
<style lang="less" scoped>
@import url('../style.less');
</style>
